<html ng-app="ss">
<head>
    <title>Swoole Request</title>

    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <!-- 可选的Bootstrap主题文件（一般不用引入） -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

    <link rel="stylesheet" href="http://v3.bootcss.com/assets/css/docs.min.css">

    <link href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="./js/jquery.js"></script>

    <script src="//cdn.bootcss.com/jquery-url-parser/2.3.1/purl.min.js"></script>
    <script src="//cdn.bootcss.com/Base64/1.0.0/base64.min.js"></script>
    <style>
        td {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .bs-callout-success {
            border-left-color: #3c763d;
        }
    </style>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <!--<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>-->
    <!--<script type="application/javascript" src="./js/Chart.min.js"></script>-->
    <script>
        var index = 1;
        window.onload = function () {
            var ws = new WebSocket('ws://192.168.56.1:10005');
            ws.onmessage = function (receive) {
                if (receive && receive.data) {
                    try {
                        var body = JSON.parse(receive.data);
                        var headers = atob(body['header']).split(/\n/);

                        if ($('tbody tr').size() == 100) {
                            $('tbody tr:last').remove();
                        }
                        var info = headers[0].split(' ');
                        var head = info[0];
                        var protocol = info[2];
                        var url = $.url(info[1]);

                        var response = atob(body['response']).split(/\r\n/);
                        var res = response[0].split(' ');

                        var code = parseInt(res[1]);
                        var length = 0;
                        var className = 'bs-callout bs-callout-active text-active';
                        if (code >= 200 && code < 300) {
                            className = 'bs-callout bs-callout-success text-success';
                        } else if (code >= 300 && code < 400) {
                            className = 'bs-callout bs-callout-info text-info';
                        } else if (code >= 400 && code < 500) {
                            className = 'bs-callout bs-callout-danger text-danger';
                        } else {
                            className = 'bs-callout bs-callout-warning text-warning';
                        }


                        for (var i in response) {
                            if (length < 1 && code == 200) {
                                length = body['length'];
                                break;
                            }
                            if (response[i].indexOf("Content-Length") == 0) {
                                length = response[i].split(': ').pop();
                                break;
                            }
                            if (response[i].indexOf("Content-Type") == 0) {
                                console.log(response[i])
                            }
                        }

                        var html = "<tr class='" + className + "'>" +
                                "<td>" + index + "</td>" +
                                "<td>" + head + "</td>" +
                                "<td>" + protocol + "</td>" +
                                "<th>" + code + "</th>" +
                                "<td title='" + url.attr('host') + "'>" + url.attr('host') + "</td>";
                        if (head == 'CONNECT') {
                            html += "<td colspan='3' style='text-align: center'><i class='glyphicon glyphicon-lock text-warning'></i></td>"
                        } else {
                            html += "<td>" + body['ip'] + "</td>" +
                                    "<td class='text-nowrap'><a target='_blank' href='" + url.attr('source') + "'>" + url.attr('relative') + "</td>" +
                                    "<td align='left'>" + (length < 1024 ? (length + ' B') : ((length / 1024).toFixed(1)) + " KB") + "</td>";
                        }

                        html += "</tr>";

                        $('tbody').prepend(html);
                        index++;
                    } catch (e) {
                        console.log(e);
                    }
                }
            };

            ws.onerror = function (err) {
                console.log(err)
            };
        }
    </script>
</head>
<body>

<div id="wrapper">

    <div id="page-wrapper">
        <div class="container-fluid">
            <!-- Page Heading -->
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">
                        REQUEST COLLECTION
                        <small>Requeset</small>
                    </h1>
                    <ol class="breadcrumb">
                        <li>
                            <i class="fa fa-dashboard"></i> <a>Dashboard</a>
                        </li>
                        <li class="active">
                            <i class="fa fa-file"></i> Request
                        </li>
                    </ol>
                </div>
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">Server Infomation</div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <table class="table table-hover table-condensed" style="table-layout: fixed">
                                <thead>
                                <tr>
                                    <th width="50px">#</th>
                                    <th width="100px">Head</th>
                                    <th width="80px">Protocol</th>
                                    <th width="80px">Code</th>
                                    <th width="10%">Domain</th>
                                    <th width="12%">Server IP</th>
                                    <th>Requeset URL</th>
                                    <th width="80px">Size</th>
                                </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>

            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </div>
    <!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->

</body>

</html>